/*
@mixin 指令允许我们定义一个可以在整个样式表中重复使用的样式。
*/

// 默认主题的变量集合
$default-theme : (
  bg-color: rgb(22, 194, 194),//背景色
  text-color: rgb(22, 194, 194),//字体颜色
);
// 白天主题的变量集合
$day-theme : (
  bg-color: rgb(145, 96, 255),//背景色
  text-color: rgb(145, 96, 255),//字体颜色
);
// 夜晚主题的变量集合
$night-theme : (
  bg-color: rgb(24, 94, 255),//背景色
  text-color: rgb(24, 94, 255),//字体颜色
);
//定义主题对象
$themes: (// key为主题  value为主题的变量集合
  default-theme: $default-theme,
  day-theme: $day-theme,
  night-theme: $night-theme
);
 
 
// 生成主题背景色样式
@mixin base-background(){
    @each $themename , $theme in $themes {
        &.#{$themename} {
            background-color: map-get($map: $theme, $key: bg-color) !important;
        }
    }
}
// 生成主题字体色样式
@mixin text-color(){
    @each $themename , $theme in $themes {
        &.#{$themename} {
            color: map-get($map: $theme, $key: text-color) !important;
        }
    }
}
